tween-functions

What is tween-functions?

The tween-functions npm package provides a collection of easing functions for use in animations. These functions help in creating smooth transitions between values over time, which is essential for animations in web development, game development, and other interactive applications.

What are tween-functions's main functionalities?

Linear Easing

Linear easing provides a constant rate of change from the start value to the end value. This is useful for simple, uniform animations.

const tweenFunctions = require('tween-functions');
const startValue = 0;
const endValue = 100;
const duration = 1000;
const currentTime = 500;
const value = tweenFunctions.linear(currentTime, startValue, endValue - startValue, duration);
console.log(value); // 50

Ease In Quad

Ease In Quad starts the animation slowly and then accelerates. This is useful for animations that need to start gently and then speed up.

const tweenFunctions = require('tween-functions');
const startValue = 0;
const endValue = 100;
const duration = 1000;
const currentTime = 500;
const value = tweenFunctions.easeInQuad(currentTime, startValue, endValue - startValue, duration);
console.log(value); // 25

Ease Out Bounce

Ease Out Bounce creates a bouncing effect at the end of the animation. This is useful for playful or attention-grabbing animations.

const tweenFunctions = require('tween-functions');
const startValue = 0;
const endValue = 100;
const duration = 1000;
const currentTime = 500;
const value = tweenFunctions.easeOutBounce(currentTime, startValue, endValue - startValue, duration);
console.log(value); // 75

Other packages similar to tween-functions

tween.js

tween.js is a popular JavaScript tweening engine that provides a wide range of easing functions and more advanced features like chaining and interpolation. It is more feature-rich compared to tween-functions and is widely used in game development and interactive applications.

gsap

GSAP (GreenSock Animation Platform) is a powerful animation library that offers a comprehensive suite of tools for creating high-performance animations. It includes a variety of easing functions and is known for its robustness and flexibility, making it a more advanced option compared to tween-functions.

animejs

animejs is a lightweight JavaScript animation library that provides a simple API for creating complex animations. It includes a variety of easing functions and supports multiple animation types, making it a versatile alternative to tween-functions.

README

Tween-functions

Robert Penner's tweening functions as used in React-tween-state and React-state-stream.

Penner's original functions uses the change in value rather than final value as parameter. I much prefer the latter, so this is what this library will use.

API

tweenFunction.tweenName(currentTime, beginValue, endValue, totalDuration)

Example

var tweenFunctions = require('tween-functions');
tweenFunctions.easeInQuad(1, 0, 50, 5); // => 4

List of available functions:

• linear
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInSine
• easeOutSine
• easeInOutSine
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBack
• easeOutBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce

Changelog

1.2.0 (November 20th 2015)

• [F] Fix return value of easeInOutExpo, easeInElastic, easeOutElastic and easeInOutElastic. 20b7790